<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  	<div class="container">
  		<!--img样式：
  			img-rounded  img-circle  img-thumbnail
  		-->
	  	<!--<img src="about-banner.jpg" alt="" class="img-responsive img-rounded" />
	  	<img src="about-banner.jpg" alt="" class="img-responsive img-circle" />
	  	<img src="about-banner.jpg" alt="" class="img-responsive img-thumbnail" />-->
  		
  	</div>
  
<div class="container">
	<!--情境文本颜色：
		text-muted 柔和的  text-primary  text-success text-info  text-warning  text-danger
		情境背景颜色
		bg-primary  bg-success  bg-info bg-warning  bg-danger
	-->
	<p class="text-muted bg-danger">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
	<p class="text-primary">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
	<p class="text-success">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
	<!--关闭按钮：
		&times;   close
		三角符号：
		caret
		浮动：
		pull-left  pull-right
		居中：
		center-block
		清楚浮动：
			通过为父元素添加 clearfix 
		显示或隐藏内容：
		show  hidden  sr-only   hide仅在3.0版本不建议使用了
	-->
	<button type="button" class="close pull-left"><span>&times;</span> <span class="caret"></span></button>
	<button class="btn btn-primary center-block show">primary</button>
	<button class="btn btn-primary center-block hidden">primary</button>
	<h1 class="text-hide">Custom heading</h1>
</div>


<div class="container">
	<button class="btn btn-primary btn-lg visible-lg-block">primary</button>
	<button class="btn btn-success visible-md-inline-block">success</button>
	<button class="btn btn-warning btn-sm visible-sm-inline">warning</button>
	<button class="btn btn-danger btn-xs visible-xs-block" >danger</button>
</div>
<style>
	
</style>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>